<template>
	<view class="order_container">
		<z-paging ref="paging" v-model="listData" @query="queryByCustomerOrderListByApp">

			<template #top>
				<v-tabs v-model="tabCurrent" :scroll="false" activeColor="#6AD89A" lineColor="#6AD89A" lineHeight="6rpx"
					lineScale="0.4" :tabs="list" @change="tabClick()"></v-tabs>
			</template>

			<!-- <view slot="cell" class="content" slot-scope="{item,index}"> -->
			<view class="content w100p mt10">
				<view class="d-flex flex-column j-sb content_item mb10" v-for="item in listData" :key="item.orderCode"
					@click="goPage(item)">
					<view class="d-flex a-center j-sb">
						<view class="title_item">订单单号</view>
						<view class="value_item">{{item.orderCode || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">订单总额</view>
						<view class="value_item">{{item.orderAmount || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">折扣总额</view>
						<view class="value_item">{{item.orderDiscount || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">实付总额</view>
						<view class="value_item">{{item.actuallyAmount || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">订单状态</view>
						<view class="value_item">
							<u-tag plain :text="payStatusList[item.payStatus].name"
								:type="payStatusList[item.payStatus].type"></u-tag>
						</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">创建时间</view>
						<view class="value_item">{{item.createTime || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">支付时间</view>
						<view class="value_item">{{item.payDate || praseStrEmpty}}</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</z-paging>
	</view>
</template>

<script>
	import {
		queryByCustomerOrderListByApp
	} from "@/api/index.js"


	export default {
		components: {
			
		},
		onHide() {
			console.log('********');
			this.tabCurrent = 0
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
			console.log('****onReady****');
		},
		onShow() {
			this.tabCurrent = 0
			const tabCurrent = uni.getStorageSync('tabCurrent');
			if (tabCurrent) {
				// 处理 params
				this.tabCurrent = parseInt(tabCurrent)
				// 使用完毕后，可以删除存储的参数
				uni.removeStorageSync('tabCurrent');
			}

			if (this.tabCurrent == 0) {
				this.tabCurrent2 = ""
			} else if (this.tabCurrent == 1) {
				this.$refs.paging.reload()
				this.tabCurrent2 = "0"
			} else {
				this.$refs.paging.reload()
				this.tabCurrent2 = "1"
			}
			
		},
		onLoad(opt) {
			console.log('****onLoad****');
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				tabCurrent: 0,
				tabCurrent2: 0,
				orderTypeList: [{
						name: "预约单",
					},
					{
						name: "在线支付单",
					},
					{
						name: "在线支付预约时间单",
					},
					{
						name: "线下支付单",
					},
				],
				payStatusList: [{
						name: "待支付",
						type: "error"
					},
					{
						name: "已支付",
						type: "success"
					}
				],
				list: ["全部", "待支付", "已支付"],
				listData: [],
			};
		},

		methods: {
			queryByCustomerOrderListByApp(pageNo, pageSize) {
				queryByCustomerOrderListByApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					customerCode: this.userInfo.customerCode,
					payStatus: this.tabCurrent2,
				}).then(res => {
					// this.listData = res.object.data
					this.$refs.paging.complete(res.object.data);
				})
			},

			tabClick(item) {

				if (item == 0) {
					this.tabCurrent2 = ""
				} else if (item == 1) {
					this.tabCurrent2 = "0"
				} else {
					this.tabCurrent2 = "1"
				}

				this.$refs.paging.reload()
			},

			goPage(row) {
				uni.navigateTo({
					url: "/pages/order/orderDetails?orderCode=" + row.orderCode
				});
			}
		},
	};
</script>

<style lang="scss" scopeds>
	page {
		background-color: #f5f5f5;
	}

	.order_container {
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				width: 700rpx;
				height: 500rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}
		}
	}
</style>